<script setup lang="ts">
  import { computed, nextTick, ref } from 'vue'
  import { reqHomeBanner } from '@/api/home'
  import type { BannerItem } from '@/types/home'
  import XtxSwiper from '@/components/XtxSwiper.vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { reqCategory } from '@/api/category'
  import type { CategoryTopItem, CategoryChildItem } from '@/types/category'
  import CateSkeleton from './components/CateSkeleton.vue'
  // 获取轮播图数据
  const bannerList = ref<BannerItem[]>([])
  const getBannerData = async () => {
    const res = await reqHomeBanner(2)
    bannerList.value = res.result
  }

  // 激活项索引
  const activeIndex = ref(0)
  // 存储分类数据
  const categoryData = ref<CategoryTopItem[]>([])
  // 获取分类数据
  const getCategory = async () => {
    const res = await reqCategory()
    categoryData.value = res.result
  }
  // 点击一级分类 tab 的回调
  const activeIndexChange = (index: number) => {
    activeIndex.value = index
    // 重置滚动条
    scrollTop.value = oldScrollTop.value
    nextTick(() => {
      scrollTop.value = 0
    })
  }
  // 二级分类滚动条顶部距离
  const scrollTop = ref(0)
  // 二级分类滚动条旧的顶部距离
  const oldScrollTop = ref(0)
  // 二级分类滚动的回调
  const scroll = (e: UniHelper.ScrollViewOnScrollEvent) => {
    oldScrollTop.value = e.detail.scrollTop
  }
  // 根据激活索引计算二级分类数据
  const subCategoryData = computed<CategoryChildItem[]>(() => {
    return categoryData.value[activeIndex.value]?.children || []
  })
  // 数据是否加载完毕
  const finish = ref(false)
  onLoad(async () => {
    await Promise.all([getBannerData(), getCategory()])
    finish.value = true
  })
</script>

<template>
  <view class="viewport" v-if="finish">
    <!-- 搜索框 -->
    <view class="search">
      <view class="input">
        <text class="icon-search">女靴</text>
      </view>
    </view>
    <!-- 分类 -->
    <view class="categories">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view
          v-for="(item, index) in categoryData"
          :key="item.id"
          class="item"
          :class="{ active: index === activeIndex }"
          @click="activeIndexChange(index)"
        >
          <text class="name">{{ item.name }}</text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view class="secondary" scroll-y :scroll-top="scrollTop" @scroll="scroll">
        <!-- 焦点图 -->
        <XtxSwiper class="banner" :list="bannerList" />
        <!-- 内容区域 -->
        <view class="panel" v-for="item in subCategoryData" :key="item.id">
          <view class="title">
            <text class="name">{{ item.name }}</text>
            <navigator class="more" hover-class="none">全部</navigator>
          </view>
          <view class="section">
            <navigator
              v-for="goods in item.goods"
              :key="goods.id"
              class="goods"
              hover-class="none"
              :url="`/pagesDetail/detail/detail?id=${goods.id}`"
            >
              <image class="image" :src="goods.picture"></image>
              <view class="name ellipsis">{{ goods.name }}</view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">{{ goods.price }}</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <CateSkeleton v-else></CateSkeleton>
</template>

<style lang="scss">
  @use './styles/category.scss';
</style>
